import styled from "styled-components";
const LeftnavWrapper = styled.div`
    height: 100%;
    /* overflow: hidden; */
    /* .am-tabs-default-bar-tab{
        width: .9rem;
        border-bottom: white 1px solid;
    } */
    
    .box{
        height: 100%;
        width: 100%;
        display: flex;
        /* overflow-y: hidden; */
        .left{
            height:calc(100% - 0.94rem);
            width: .8rem;
            /* border-right: 1px solid #ccc; */
            overflow-y: auto;
            div{
                width: .8rem;
                height: .6rem;
                text-align: center;
                line-height: .6rem;
                border-bottom: 1px solid white;
            }
        }
        .right{
            flex: 1;
            width: 100%;
            background-color: white;
            display: flex;
            flex-wrap: wrap;
            /* 改变主轴的方向 */
            justify-content: flex - start;
            /* 多轴对齐效果的，让换行清除行距 */
            align-content: flex - start;
            height: 100%;
            overflow-y: auto;
            padding: 0 .1rem .1rem .1rem;
            height:calc(100% - 0.94rem);

        } 
    }

`

const LeftWrapper=styled.div`
    text-align: center;
    width: .8rem;
    border-bottom: 1px solid white;
   
    .active{
        background-color: ${props=>props.activeInnerBg};
        color: ${props=>props.textColor};
    }
`
const LeftnavItemWrapper = styled.div`
    height:.5rem;
    text-align: center;
    line-height: .6rem;
    background-color: ${props=>props.innerBg};

    div{
        border-bottom:  1px white solid;

    }
    .active{
        background-color: ${props=>props.activeInnerBg};
        color: ${props=>props.textColor};
    }
`
export {
    LeftnavWrapper,
    LeftnavItemWrapper,
    LeftWrapper
}




